<!DOCTYPE html>
<html>

<head lang="en">
		<title>找攻略</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/strategyComment.css" />
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
		<script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
		<script src="/js/common.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
		<script src="/js/plugins/dialog2/dialog.min.js"></script>

		<style>
			.container{
				width: 100%;
			}
			.commentbox{
				width: 100%;
				margin: 20px auto;
			}
			.mytextarea {
				width: 78%;
				overflow: auto;
				word-break: break-all;
				height: 10%;
				color: #000;
				font-size: 1em;
				resize: none;
			}

		</style>






<script>
	$(function () {
		//查询当前评论的用户id
		var loginUser = JSON.parse(sessionStorage.getItem("user"))
		var loginUserId = loginUser.id;
		var user = getParams()
		var userId = user.id


			var userIdNow;
			//先查出是否被关注
			if (loginUser && user) {
				$.get("/users/isFocus/" + loginUserId + "/" + userId, function (data) {
					if (data.success) {//若为true则说明已关注
						$("#followBtn").html('');
						$("#followBtn").html('已关注');
						$("#followBtn").css("background-color", "green");
						$("#followBtn").css("border-color", "green");
					} else {
						$("#followBtn").html('');
						$("#followBtn").html('未关注');
						$("#followBtn").css("background-color", "red");
						$("#followBtn").css("border-color", "red");
					}
				})
			}
			$("#followBtn").click(function () {
				var loginUser = JSON.parse(sessionStorage.getItem("user"))
				var loginUserId = loginUser.id;
				var user = getParams()
				var userId = user.id
				var userIdNow = $("#users").val()
				if (user.id) {
					$.get("/users/isFocus/" + loginUserId + "/" + userId, function (data) {
						if (!(data.success)) {//如果为false,执行关注;
                            $(document).dialog({
                                type: 'confirm',
                                content: '确认关注？ '/*+user.nickName*/,
                                onClickConfirmBtn: function () {
                                    $.post("/users/insertFocus/" + loginUserId + "/" + userId, function (data1) {
                                        if (data1.success) {
                                        }
                                    });
                                    window.location.reload();
                                }
                            });
						} else {

                            $(document).dialog({
                                type: 'confirm',
                                content: '取消关注？ '/*+loginUser.nickName*/,
                                onClickConfirmBtn: function () {
                                    $.ajax({
                                        url: "/users/deleteFocus/" + loginUserId + "/" + userId,
                                        type: "DELETE",
                                        success: function (data2) {
                                            if (data2.success) {

                                            }
                                        }
                                    })
                                    window.location.reload();
                                }
                            });
						}
					})
				}
			})
			//获取当前攻略id
			var params = getParams();
			var commentId = params.id;
			var user = sessionStorage.getItem("user");
			var userId = JSON.parse(user).id;


			$.get("/strategyComments/comments/" + commentId, function (data) {
				var imgUrl = data.imgUrls;
				var imgUrls = imgUrl.split(";");
				var imgs = "";

				for (var i = 0; i < imgUrls.length - 1; i++) {
					var imgs = imgUrls[i];
					img = '<li><img  src="' + imgs + '"></li>';
					$('.comment-img').append(img)
				}
				//渲染页面内容
				$(".comment").renderValues(data, {

					'getStar': function (item, value) {
						var starhtml = '';
						var unstarhtml = '';
						for (var i = 0; i < value; i++) {
							starhtml += '<i class="fa fa-star"></i>';
						}
						for (var i = 0; i < 5 - value; i++) {
							unstarhtml += '<i class="fa fa-star-o"></i>';
						}
						$(".comment-star").html(starhtml + unstarhtml);
						},
						setHref:function (item,value) {
							$(item).attr("href",$(item).data("href")+value)
						},
						setUser:function (item,value) {
							$(item).attr("href",$(item).data("href")+value)
						}

						}
					)

				//图片点击
				$(".comment-img img").click(function () {
					$(document).dialog({
						titleShow: false,
						overlayClose: true,
						content: '<div style="text-align: center;"><img width="100%" src="' + $(this).attr('src') + '"></div>'
					});
				})
			})

        //根据当前攻略中的攻略id查询出评论者的id
        $.get("/strategyComments/comments/"+commentId,function (data) {
            //子评论
            $("#comment").click(function(){
                if(userId){
                    var obj = {
                        userId:userId,
                        content:$("#content").val(),
                        strategyCommentId:commentId
                    }

                    $.post("/strategyComments/"+commentId+"/addComment",obj,function (data) {
                        if(data.success){
                            window.location.reload()
                        }else {
                            $(document).dialog({
                                content: data.msg
                            });
                        }
                    })
                }else {
                    $(document).dialog({
                        type: 'confirm',
                        content: '请先登录 ',

                    })
                }
            });

            //二次评论回显
            $.get("/addComments/"+commentId,function (data) {
                if(data){
                    $('.children').renderValues({list:data},{
                        setAutor:function (item,value) {
                            $(item).attr("href",$(item).data("href")+value)
                        }
                    });}

            })

            //子评论数量
            $.get("/addComments/"+commentId+"/count",function (data) {
                $('.count').renderValues(data)
            })



            //页面点赞渲染

            //查看当前用户是否被点赞
            $.get("/strategyComments/chose", {userId: userId, commentId: commentId}, function (data) {
                console.log(data);
                $("#heart").renderValues(data);
                if (data.success) {
                    $("#heart").removeClass("fa-heart-o");
                    $("#heart").addClass("fa-heart");
                    $("#heart").css("color", "#BD2130");
                } else {
                    $("#heart").removeClass("fa-heart");
                    $("#heart").addClass("fa-heart-o");
                    $("#heart").css("color", "#000000");
                }
            });
            //创建点击事件修改点赞

            //给点赞绑定事件
            $("#heart").click( function () {
                var user = JSON.parse(sessionStorage.getItem("user"))
                var userId = user.id;



                $.get("/strategyComments/chose", {userId: userId, commentId: commentId},function (data) {
                    //data为false表示后台不存在点赞记录
                    if (!(data.success)) {

                        //点赞
                        $.post("/strategyComments/insertChose/"+commentId+"/"+userId,function (data1) {
                            console.log(data1);
                            if (data1) {
                                window.location.reload();
                            }
                        })
                        //若data为true说明数据库中存在该数据,取消点赞
                    }else {
                        $.ajax({
                            url: "/strategyComments/deleteChose/" +commentId+"/"+userId,
                            type: "DELETE",
                            success: function (data2) {
                                console.log(data2);
                                if (data2.success) {
                                    window.location.reload();
                                }
                            }
                        })
                    }
                })


                //如果查不到用户，说明没登录
                if (!userId) {
                    $(document).dialog({
                        titleShow: false,
                        content: '请先登录',
                    });
                    return;
                }
            })
        })



        //收藏和取消收藏功能、收藏数显示
            //begin----------------------------------------------
            //统计收藏数
            var collectClickCount = 0;
            var collectCount;
            var flag;//1表示已收藏，0表示未收藏
            $.get("/strategyComments/collectCount", {"commentId": params.id}, function (data) {
                collectCount = data;
                $("#collectBtn").text(collectCount + " ");
            })

            //显示收藏按钮的样式
            $.get("/strategyComments/" + userId + "/" + params.id, function (data) {
                if (data == true) {
                    $("#collectBtn").addClass("fa-star");
                    flag = 1;
                } else {
                    $("#collectBtn").addClass("fa-star-o");
                    flag = 0;
                }
            })

            //收藏按钮的点击事件
            $("#collectBtn").click(function () {
                if (collectClickCount < 5) {
                    if (!flag) {//如果未收藏
                        $(this).removeClass("fa-star-o");
                        $(this).addClass("fa-star");
                        $.post("/strategyComments/" + userId, {"commentId": params.id}, function (data) {

                        });
                        collectCount += 1;
                        $("#collectBtn").text(" " + collectCount);
                        flag = 1;

                    } else {
                        $(this).removeClass("fa-star");
                        $(this).addClass("fa-star-o");
                        $.ajax({
                            type: "DELETE",
                            url: "/strategyComments/" + userId,
                            data: {"commentId": params.id}
                        })
                        collectCount -= 1;
                        $("#collectBtn").text(collectCount + " ");
                        flag = 0;
                    }
                } else {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '操作太频繁啦!',
                        autoClose: 2500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
                collectClickCount++;
            })

            //end----------------------------------------------------------


        })
</script>
	</head>

	<body>
		<div class="search-head">
			<div class="row nav-search">
				<div class="col">
					<a href="javascript:history.go(-1);">
						<span><i class="fa fa-chevron-left fa-2x"></i></span>
					</a>
				</div>
				<div class="col">
					<span>点评详情</span>
				</div>
				<div class="col"></div>
			</div>
		</div>

			<div class="comment">


			<div class="container">
				<div class="row" >
						<div class="col-2 comment-head">
							<input type="hidden" render-value="user.id" id="users">
							<a data-href="/mine/userProfiles.html?id="  render-key="user.id" render-fun="setUser">
								<img class="rounded-circle" render-src="user.headImgUrl">
							</a>
							<button class="btn" id="followBtn">
								<i class="fa fa-hand-o-right"> </i> 关注</button>
						</div>
						<div class="col">
							<span class="comment-star" render-fun="getStar" render-key="starNum" ></span>

							<span class="comment-date" render-html="createTime"></span>
							<div class="comment-content">
								<p render-html="content"></p>
							</div>
							<ul class="comment-img" >

							</ul>

							<div class="comment-link">
								<a data-href="strategyCatalogs.html?id=" render-fun="setHref"  render-key="strategy.id">
									<img  render-src="strategy.coverUrl">
										<span render-html="strategy.title"></span>
									<i class="fa fa-angle-right fa-2x"></i>
								</a>
							</div>

						</div>
				</div>
			</div>

			<div class="count d-flex justify-content-between">
					<div class="p-2">评论<span render-html="counts" ></span></div>
					<div class="p-2 heart" ><span class="fa fa-heart-o" id="heart" style="color: #00008B" render-html="data"></span>赞</div>
					<div class="p-2"><i class="fa" id="collectBtn"></i><span>收藏</span></div>
			</div>

			</div>

		<!--<div class="comment-list">
			快来发表你的评论吧
		</div>-->
		<div class="container children">
			<div render-loop="list">
				<div class="row">
					<div class="col-2 comment-head">
						<a data-href="/mine/userProfiles.html?id="  render-fun="setAutor" render-key="list.user.id">
							<img class="rounded-circle" render-src="list.user.headImgUrl">
						</a>
					</div>
					<div class="col">

						<span class="comment-content" render-html="list.user.nickName" ></span>
						<span class="comment-date" render-html="list.createTime"></span>
						<div class="comment-content">
							<p render-html="list.content"></p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="container" style="overflow:auto; height: 100px; width: 400px; ">
			<div class="commentbox" >
				<textarea cols="80" rows="50" style="height: 40px" placeholder="来说几句吧......" class="mytextarea" id="content" ></textarea>
				<div class="btn btn-info pull-right" id="comment" style="margin-right: 20px">评论</div>
			</div>
		</div>

</body>

</html>